<!docType html>
<html>
<head>
	<meta charset="utf-8">
	<title>The Shape of css</title>
	<style type="text/css">

.mr10 div{
	margin: 10px;
}

#square{
	width: 100px;
	height: 100px;
	background-color: #99CCFF;
}
#rectangle{
	width: 200px;
	height: 100px;
	background-color: #99CCFF;
}
#circle{
	width: 100px;
	height: 100px;
	background-color: #99CCFF;
	border-radius: 50px;
}
#Oval{
	width: 200px;
	height: 100px;
	background-color: #99CCFF;
	border-radius: 100px/50px;
}
#egg{
	width: 100px;
	height: 150px;
	background-color: #99CCFF;
	border-radius: 50%/60% 60% 40% 40%;
}
#triangle-up{
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #99CCFF;
}
#triangle-down{
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #99CCFF;
}
#triangle-left{
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-right: 100px solid #99CCFF;
}
#triangle-right{
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 100px solid #99CCFF;
}

#triangle-topleft{
	width: 0;
	height: 0;
	border-top:100px solid #99CCFF;
	border-right: 100px solid transparent;
}
#triangle-topright{
	width: 0;
	height: 0;
	border-top:100px solid #99CCFF;
	border-left: 100px solid transparent;
}
#triangle-bottomleft{
	width: 0;
	height: 0;
	border-bottom:100px solid #99CCFF;
	border-right: 100px solid transparent;
}
#triangle-bottomright{
	width: 0;
	height: 0;
	border-bottom:100px solid #99CCFF;
	border-left: 100px solid transparent;
}


#curvedarrow{
	position: relative;
	left:50px;
	top:20px;
	width: 0;
	height: 0;
	border-bottom: 40px solid red;
	border-left: 40px solid transparent;
	-webkit-transform: rotate(10deg);
}

#curvedarrow:after{
	content:"";
	width: 60px;
	height: 60px;
	position: absolute;
	border: 0 solid transparent;
	border-top: 15px solid red;
	border-radius: 60px 0 0 0;
	top: -9px;
	left: -81px;
	-webkit-transform: rotate(45deg);
}

#trapezoid{
	margin-top:50px;
	width: 50px;
	height: 0;
	border-left:25px solid transparent;
	border-right:25px solid transparent;
	border-bottom: 50px solid red;
}

#parallelogram{
	width: 100px;
	height: 50px;
	-webkit-transform: skew(20deg);
	background-color: red;
}

#star{
	width: 0;
	height: 0;
	border-left:50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
	position: relative;
}
#star:after{
	content: "";
	position: absolute;
	left:-50px;
	top:36px;
	width: 0;
	height: 0;
	border-left:50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}


#star-five{
	width: 0;
	height: 0;
	position: relative;
	top:100px;
	border-right:  100px solid transparent;
   	border-bottom: 70px  solid red;
  	border-left:   100px solid transparent;
  	-webkit-transform: rotate(35deg);
}

#star-five:after{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top:3px;
	left: -105px;
	border-right:  100px solid transparent;
   	border-bottom: 70px  solid red;
  	border-left:   100px solid transparent;
  	-webkit-transform: rotate(-70deg);
}

#star-five:before{
	content: "";
	width: 0;
	height: 0;
	top:-45px;
	left: -65px;
	position: absolute;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 80px solid red;
	-webkit-transform: rotate(-35deg);
}

#pentagon {
    position: relative;
    top:200px;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}

#hexagon{
	width: 100px;
	height: 55px;
	background-color: red;
	position: relative;
	top:250px;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}

#octagon{
	width: 100px;
	height: 100px;
	background-color: red;
	position: relative;
	top:300px;
}
/*#octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 29px solid red;
	border-left: 29px solid transparent;
	border-right: 29px solid transparent;
	width: 42px;
	height: 0;
}

#octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 29px solid red;
	border-left: 29px solid transparent;
	border-right: 29px solid transparent;
	width: 42px;
	height: 0;
}*/


#octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 29px solid red;
	border-left: 29px solid #fff;
	border-right: 29px solid #fff;
	width: 42px;
	height: 0;
}

#octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 29px solid red;
	border-left: 29px solid #fff;
	border-right: 29px solid #fff;
	width: 42px;
	height: 0;
}


	</style>

</head>

<body>


	<div class="mr10">

		<div id="square"></div>
		<div id="rectangle"></div>
		<div id="circle"></div>
		<div id="Oval"></div>
		<div id="egg"></div>

		<div id="triangle-up"></div>
		<div id="triangle-down"></div>
		<div id="triangle-left"></div>
		<div id="triangle-right"></div>

		<div id="triangle-topleft"></div>
		<div id="triangle-topright"></div>
		<div id="triangle-bottomleft"></div>
		<div id="triangle-bottomright"></div>
		
		<div id="curvedarrow"></div>

		<div id="trapezoid"></div>
		<div id="parallelogram"></div>


		<div id="star"></div>
		<div id="star-five"></div>
		<div id="pentagon"></div>
		<div id="hexagon"></div>
		<div id="octagon"></div>

	</div>



</body>



</html>